<template>
    <div class="editorContent">
        <div class="editer_conBox">
            <div class="poup_main" id="poup_main" v-if="showDuo">
                <span v-for="(item, i) in duoyinList.duoyin" :key="i" @click="selectDuo(item)">{{ item }}</span>
            </div>
            <span class="palcehalder" v-if="placehelder">
                请输入需要配音的内容...
            </span>
            <perfect-scrollbar>
                <div contenteditable="true" @focus="focus" @compositionstart="compositionstart"
                    @compositionend="compositionend" @input="hanglerInput" @cut="cut" @paste="paste" @mousedown="mousedown"
                    @mouseup="mouseup" @mousemove="mousemove" @keydown="keydown" id="editor_content" class="editor_content"
                    v-html="content">
                </div>
            </perfect-scrollbar>
        </div>

    </div>
</template>

<script>
import mixins from './mixins/mixins'
import $ from "jquery";
export default {
    mixins: [mixins],
    data() {
        return {
            selectText: "",
            iscomm: false,
            isDragging: false,
            mouseDownPos: null,
            isloading: false,
            src: '',
        };
    },

    computed: {
        placehelder: {
            get: function () {
                if (this.strData[0].length == 0) {
                    return true
                } else {
                    return false
                }
            },
            set: function (val) {
                return val
            }
        },
        strData() {
            return this.$store.getters.audioData
        },
        showDuo: {
            get: function () {
                return this.$store.getters.showPoup
            },
            set: function (val) {
                this.$store.dispatch('audio/setShowPoup', val)
                this.$store.dispatch('audio/setDuoyinList', [])
            }


        },
        duoyinList() {
            return this.$store.getters.duoyinList
        },
        pos() {
            return this.$store.getters.pos
        },
    },
    mounted() {
        this.setContent();
        this.runRange();
    },
    methods: {

        selectDuo(text) {
            this.strData[this.duoyinList.row][this.duoyinList.col].isDuo = text;
            this.setContent();
            this.showDuo = false;
        },
        // 粘贴
        paste(e) {
            e.preventDefault();
            const text = e.clipboardData.getData("text");
            if (text) {
                const textArr = text.trim().replace(/\r/g, '').split(/\n/g);
                let arr = [];
                textArr.forEach((item) => {
                    let row = [];
                    item.split("").forEach((k) => {
                        row.push({
                            text: k,
                            tag: "span",
                            isnum: false,
                            pinyin: this.pinyinDo(k)[0],
                            isDuo: "",
                            duoyin: this.pinyinDo(k),
                            className: "word_text",
                        });
                    });
                    arr.push([...row]);
                });
                if (arr.length == 1) {
                    this.strData[this.pos.row].splice(
                        this.pos.col,
                        0,
                        ...arr[0],
                        ...this.strData[this.pos.row].splice(this.pos.col)
                    );
                    this.setContent();
                    this.pos.col += arr[0].length;
                    this.runRange();
                } else {
                    let netxtCopy = this.strData[this.pos.row].splice(this.pos.col);
                    let preCopy = this.strData[this.pos.row].splice(0, this.pos.col);
                    preCopy.push(...arr[0]);
                    const cent = arr.splice(1);
                    this.strData[this.pos.row] = preCopy;
                    this.strData.splice(
                        this.pos.row + 1,
                        0,
                        ...[...cent, netxtCopy],
                        ...arr.slice(this.pos.row + 1)
                    );
                    this.setContent();
                    this.pos.col = cent[cent.length - 1].length;
                    this.pos.row += cent.length;
                    this.runRange();
                }
            }
        },
        hanglerInput(e) {
            this.placehelder = false
            if (!this.iscomm) {
                this.strData[this.pos.row].splice(
                    this.pos.col,
                    0,
                    {
                        text: e.data,
                        tag: "span",
                        isnum: false,
                        pinyin: "",
                        isDuo: "",
                        duoyin: [],
                        className: "word_text",
                    },
                    ...this.strData[this.pos.row].splice(this.pos.col)
                );
                this.setContent();
                this.pos.col++;
                this.runRange();
            }
        },
        compositionstart() {
            this.placehelder = false
            this.iscomm = true;
        },
        compositionend(e) {
            this.iscomm = false;
            const str = e.data.split("");
            const textArr = [];
            str.forEach((t) => {
                textArr.push({
                    text: t,
                    tag: "span",
                    isnum: false,
                    pinyin: this.pinyinDo(t)[0],
                    isDuo: "",
                    duoyin: this.pinyinDo(t),
                    className: "word_text",
                });
            });
            this.strData[this.pos.row].splice(
                this.pos.col,
                0,
                ...textArr,
                ...this.strData[this.pos.row].splice(this.pos.col)
            );
            this.setContent();
            this.pos.col += str.length;
            this.runRange();
        },
        deleteStr() {
            this.pos.col--;
            if (this.pos.row > 0) {
                if (this.pos.col < 0) {
                    if (this.strData[this.pos.row].length <= 0) {
                        this.strData.splice(this.pos.row, 1);
                    }
                    this.pos.row--;
                    this.pos.col = this.strData[this.pos.row].length;
                } else {
                    this.strData[this.pos.row].splice(this.pos.col, 1);
                }
            } else {
                this.strData[this.pos.row].splice(this.pos.col, 1);
                if (this.pos.col < 0) {
                    this.pos.col = 0;
                    return
                }
            }
            this.setContent();
            this.runRange();
        },
        // 剪切
        cut(e) {
            const selection = window.getSelection();
            const range = selection.getRangeAt(0);
            const content = range.toString();
            e.clipboardData.setData("text/plain", content);
            range.deleteContents();
            let domArr = [];
            $(".editor_content")
                .children(".editor_row")
                .each(function () {
                    let m = [];
                    $(this)
                        .children(".word_box")
                        .eq(0)
                        .children(".word_text")
                        .each(function () {
                            const txt = $(this)
                                .children(".word")
                                .eq(0)
                                .children(".text")
                                .eq(0)
                                .text()
                                .trim();
                            m.push(txt);
                        });
                    domArr.push(m);
                });
            let newArr = [];
            domArr.forEach((row, i) => {
                let mArr = [];
                row.forEach((col, index) => {
                    if (this.strData[i][index] && this.strData[i][index].text == col) {
                        mArr.push(this.strData[i][index]);
                    }
                });
                newArr.push(mArr);
            });
            this.strData = newArr;
            this.pos.row = newArr.length - 1;
            this.pos.col = 0
            this.setContent();
            this.runRange();
            e.preventDefault();
        },
        mousedown(e) {
            if (e.target.className == "textPinyin") {
                e.preventDefault();
            } else {
                this.positionRun();
                this.isDragging = false;
                this.mouseDownPos = {
                    x: e.clientX,
                    y: e.clientY,
                };
            }
        },

        positionRun() {
            setTimeout(() => {
                this.$nextTick(() => {
                    var selection = window.getSelection();
                    const ran = selection.getRangeAt(0)
                    var currentNode = selection.anchorNode;
                    while (currentNode.nodeType !== 1) {
                        currentNode = currentNode.parentNode;
                    }
                    if (currentNode.className == "word_box") {
                        const row = $(currentNode).parent(".editor_row").attr("data_row");
                        this.pos.row = row * 1;
                        if (this.strData[this.pos.row].length == 0) {
                            this.pos.col = 0;
                        } else {
                            this.pos.col = this.strData[this.pos.row].length - 1;
                        }
                    } else {
                        this.pos.col = $(currentNode).attr("lang") * 1;
                        if (this.pos.col == 1) {
                            if (ran.startOffset == 1) {
                                this.pos.col = 0
                            } else {
                                this.pos.col = $(currentNode).attr("lang") * 1;
                            }
                        }
                        this.pos.row = $(currentNode).attr("row") * 1;
                    }
                });
            }, 10);
        },
        keydown(event) {
            if (event.keyCode == 13) {
                event.preventDefault();
                const next = this.strData[this.pos.row].splice(this.pos.col);
                this.strData[this.pos.row] = this.strData[this.pos.row].splice(
                    0,
                    this.pos.col
                );
                this.strData.splice(
                    this.pos.row + 1,
                    0,
                    next,
                    ...this.strData.splice(this.pos.row + 1)
                );
                this.setContent();
                this.pos.row++;
                this.pos.col = next.length;
                this.runRange();
            }
            if (event.keyCode == "8") {
                event.preventDefault();
                this.deleteStr();
            }
            // 判断按下的键是否是上下左右箭头键
            if (event.keyCode >= 37 && event.keyCode <= 40) {
                event.preventDefault();
                if (event.keyCode == 37) {
                    this.pos.col--;
                    if (this.pos.col < 0) {
                        this.pos.row--;
                        if (this.pos.row < 0) {
                            this.pos.row = 0;
                            this.pos.col = 0;
                            return;
                        }
                        this.pos.col = this.strData[this.pos.row].length;
                    }
                }
                if (event.keyCode == 39) {
                    this.pos.col++;
                    if (this.pos.col > this.strData[this.pos.row].length) {
                        if (this.pos.row > 0) {
                            this.pos.row++;
                            if (this.pos.row > this.strData.length - 1) {
                                this.pos.row = this.strData.length - 1;
                                return;
                            }
                            this.pos.col = 0;
                        } else {
                            this.pos.col = this.strData[this.pos.row].length
                        }

                    }
                }
                if (event.keyCode == 40) {
                    this.pos.row++;
                    if (this.pos.row > this.strData.length - 1) {
                        this.pos.row = this.strData.length - 1;
                        return;
                    }
                    if (this.strData[this.pos.row].length == 0) {
                        this.pos.col = 0;
                    }
                    if (this.pos.col > this.strData[this.pos.row].length) {
                        this.pos.col = this.strData[this.pos.row].length;
                    }
                }
                if (event.keyCode == 38) {
                    this.pos.row--;
                    if (this.pos.row < 0) {
                        this.pos.row = 0;
                        return;
                    }
                    if (this.strData[this.pos.row].length == 0) {
                        this.pos.col = 0;
                    }
                    if (this.pos.col > this.strData[this.pos.row].length) {
                        this.pos.col = this.strData[this.pos.row].length;
                    }
                }
                this.runRange();
            }
        },

    },
}
</script>

<style lang="less">
.editorContent {
    width: 100%;
    height: calc(100% - 88.6px);
    position: relative;

    .editer_conBox {

        width: 1200px;
        height: 100%;
        box-sizing: border-box;
        font-size: 16px;
        margin: auto;
        color: #002030;
        background-color: #fff;
        overflow-y: auto;
        position: relative;

        .palcehalder {
            position: absolute;
            top: 32px;
            left: 60px;
            color: #ccc;
            letter-spacing: 3px;
            font-size: 20px;
        }

        .poup_main {
            position: absolute;
            top: 0;
            left: 0;
            font-size: 14px;
            border-radius: 8px;
            background: #fefefe;
            box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
            white-space: nowrap;
            z-index: 2;
            padding: 10px;
        }

        .poup_main span {
            min-width: 40px;
            height: 34px;
            line-height: 32px;
            border-radius: 4px;
            color: #333;
            border: 1px solid #e5e5e5;
            background-color: #fff;
            margin: 0 3px;
            box-sizing: border-box;
            display: inline-block;
            text-align: center;
            cursor: pointer;
        }

        .poup_main span:hover {
            background-color: #f6f6f6;
        }

        .ps {
            height: 100%;
        }

        .editor_content {
            width: 100%;
            min-height: 100%;
            outline: none;
            padding: 15px 60px;
            box-sizing: border-box;

            .word_box {
                min-height: 30px;
            }

            .editor_row {
                width: 100%;
                margin: 20px 0;

                .word_text {
                    // padding: 2px 0;
                    position: relative;
                    display: inline-block;
                    min-width: 1px;
                    text-align: center;
                    cursor: pointer;


                    .word {
                        display: inline-block;
                        flex-direction: column;

                        .text {
                            font-style: normal;
                            font-size: 20px;
                        }

                        .isDuo {
                            position: relative;
                            font-size: 15px;
                            margin: 0 7px;

                            &::after {
                                content: "";
                                position: absolute;
                                left: 0;
                                bottom: 0;
                                height: 2px;
                                width: 100%;
                                background-color: #2da94f;
                            }
                        }

                        .isnum {
                            position: relative;
                            color: #12a775;

                            &::after {
                                content: "";
                                position: absolute;
                                left: 0;
                                bottom: 0;
                                height: 2px;
                                width: 100%;
                                background-color: #a7cbdd;
                            }
                        }

                        .isShd {
                            position: relative;
                            color: #decd12;

                            &::after {
                                content: "";
                                position: absolute;
                                left: 0;
                                bottom: 0;
                                height: 2px;
                                width: 100%;
                                background-color: #decd12;
                            }
                        }

                    }

                    .textPinyin {
                        position: absolute;
                        top: -20px;
                        left: -4px;
                        right: 0;
                        display: inline-block;
                        font-style: normal;
                        font-weight: normal;
                        font-size: 12px;
                        padding: 2px;
                        min-width: 36px;
                        box-sizing: border-box;
                        border-radius: 2px;
                        font-size: 12px;
                        color: #333;
                        transform: scale(0.7);
                        border-width: 1px;
                        border-style: solid;
                        box-sizing: border-box;
                        white-space: nowrap;
                        cursor: pointer;
                        margin: auto;
                        background-color: #eff8f2;
                        border-color: #2da94f;
                    }
                }
            }
        }
    }
}
</style>